<template>
  <div class="import-page">
    <div class="page-header">
      <h1>数据导入</h1>
      <p class="subtitle">批量导入客户名单，并分配给指定的客户经理和服务项目</p>
    </div>

    <el-steps :active="currentStep" finish-status="success" align-center>
      <el-step title="选择配置" description="选择客户经理和服务项目" />
      <el-step title="导入数据" description="上传或输入客户数据" />
      <el-step title="预览确认" description="预览导入数据并确认" />
      <el-step title="完成导入" description="执行导入操作" />
    </el-steps>

    <div class="step-content">
      <!-- 步骤1：选择配置 -->
      <div v-if="currentStep === 0" class="step-panel">
        <el-card shadow="never">
          <template #header>
            <h3>选择客户经理和服务项目</h3>
          </template>
          
          <el-form :model="configForm" label-width="120px">
            <el-form-item label="客户经理" required>
              <div class="selection-display">
                <el-input
                  :value="selectedManagerDisplay"
                  placeholder="请选择客户经理"
                  readonly
                  style="width: 300px"
                >
                  <template #suffix>
                    <el-button
                      type="primary"
                      link
                      @click="showManagerDialog = true"
                    >
                      选择
                    </el-button>
                  </template>
                </el-input>
              </div>
            </el-form-item>
            
            <el-form-item label="服务项目" required>
              <div class="selection-display">
                <el-input
                  :value="selectedServicesDisplay"
                  placeholder="请选择服务项目"
                  readonly
                  style="width: 400px"
                >
                  <template #suffix>
                    <el-button
                      type="primary"
                      link
                      @click="showServiceDialog = true"
                    >
                      选择
                    </el-button>
                  </template>
                </el-input>
              </div>
            </el-form-item>
          </el-form>
          
          <div class="step-actions">
            <el-button type="primary" @click="nextStep" :disabled="!canProceedStep1">
              下一步
            </el-button>
          </div>
        </el-card>
      </div>

      <!-- 步骤2：导入数据 -->
      <div v-if="currentStep === 1" class="step-panel">
        <el-card shadow="never">
          <template #header>
            <h3>导入客户数据</h3>
          </template>
          
          <el-tabs v-model="importMethod">
            <el-tab-pane label="手动输入" name="manual">
              <div class="manual-input">
                <p class="input-tip">
                  请按以下格式输入客户数据，每行一个客户：<br>
                  <code>客户代码,客户名称,市场类型,终端类型</code><br>
                  市场类型：城网 或 农网<br>
                  终端类型：普通终端、一般现代终端、加盟终端、直营终端
                </p>
                
                <el-input
                  v-model="manualData"
                  type="textarea"
                  :rows="10"
                  placeholder="示例：&#10;C001,张三便利店,城网,普通终端&#10;C002,李四超市,农网,加盟终端"
                />
                
                <div class="input-actions">
                  <el-button @click="parseManualData">解析数据</el-button>
                  <el-button @click="clearManualData">清空</el-button>
                </div>
              </div>
            </el-tab-pane>
            
            <el-tab-pane label="文件上传" name="file">
              <div class="file-upload">
                <el-upload
                  class="upload-demo"
                  drag
                  :auto-upload="false"
                  :on-change="handleFileChange"
                  :show-file-list="false"
                  accept=".csv,.txt"
                >
                  <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                  <div class="el-upload__text">
                    将文件拖到此处，或<em>点击上传</em>
                  </div>
                  <template #tip>
                    <div class="el-upload__tip">
                      支持 CSV 和 TXT 文件，格式与手动输入相同<br>
                      <small style="color: #909399;">
                        自动检测文件编码（支持 UTF-8、GBK、GB2312 等）
                      </small>
                    </div>
                  </template>
                </el-upload>
              </div>
            </el-tab-pane>
          </el-tabs>
          
          <!-- 解析结果 -->
          <div v-if="parsedClients.length > 0" class="parsed-result">
            <h4>解析结果（{{ parsedClients.length }} 条记录）</h4>
            <el-table :data="parsedClients.slice(0, 5)" size="small" style="width: 100%">
              <el-table-column prop="clientCode" label="客户代码" width="120" />
              <el-table-column prop="clientName" label="客户名称" width="200" />
              <el-table-column prop="marketType" label="市场类型" width="100" />
              <el-table-column prop="terminalType" label="终端类型" width="120" />
            </el-table>
            <p v-if="parsedClients.length > 5" class="more-tip">
              还有 {{ parsedClients.length - 5 }} 条记录...
            </p>
          </div>
          
          <div class="step-actions">
            <el-button @click="prevStep">上一步</el-button>
            <el-button type="primary" @click="nextStep" :disabled="parsedClients.length === 0">
              下一步
            </el-button>
          </div>
        </el-card>
      </div>

      <!-- 步骤3：预览确认 -->
      <div v-if="currentStep === 2" class="step-panel">
        <el-card shadow="never">
          <template #header>
            <h3>预览导入数据</h3>
          </template>
          
          <div v-loading="previewing" class="preview-content">
            <div class="import-summary">
              <h4>导入配置</h4>
              <el-descriptions :column="2" border>
                <el-descriptions-item label="客户经理">
                  {{ selectedManager?.fullName }} ({{ selectedManager?.username }})
                </el-descriptions-item>
                <el-descriptions-item label="服务项目">
                  {{ selectedServices.map(s => s.serviceName).join(', ') }}
                </el-descriptions-item>
                <el-descriptions-item label="客户数量">
                  {{ parsedClients.length }} 个
                </el-descriptions-item>
                <el-descriptions-item label="预计创建关联">
                  {{ parsedClients.length * configForm.serviceIds.length }} 个服务关联
                </el-descriptions-item>
              </el-descriptions>
            </div>
            
            <div v-if="previewResult" class="validation-result">
              <h4>验证结果</h4>
              <el-alert
                :type="previewResult.valid ? 'success' : 'error'"
                :title="previewResult.valid ? '数据验证通过' : '数据验证失败'"
                :closable="false"
                show-icon
              />
              
              <div v-if="previewResult.errors.length > 0" class="error-list">
                <h5>错误信息：</h5>
                <ul>
                  <li v-for="error in previewResult.errors" :key="error" class="error-item">
                    {{ error }}
                  </li>
                </ul>
              </div>
              
              <div v-if="previewResult.warnings.length > 0" class="warning-list">
                <h5>警告信息：</h5>
                <ul>
                  <li v-for="warning in previewResult.warnings" :key="warning" class="warning-item">
                    {{ warning }}
                  </li>
                </ul>
              </div>
            </div>
          </div>
          
          <div class="step-actions">
            <el-button @click="prevStep">上一步</el-button>
            <el-button @click="previewImport" :loading="previewing">重新验证</el-button>
            <el-button 
              type="primary" 
              @click="nextStep" 
              :disabled="!previewResult?.valid"
            >
              确认导入
            </el-button>
          </div>
        </el-card>
      </div>

      <!-- 步骤4：完成导入 -->
      <div v-if="currentStep === 3" class="step-panel">
        <el-card shadow="never">
          <template #header>
            <h3>执行导入</h3>
          </template>
          
          <div v-loading="importing" class="import-progress">
            <div v-if="!importCompleted" class="importing">
              <el-icon class="loading-icon"><Loading /></el-icon>
              <p>正在导入数据，请稍候...</p>
            </div>
            
            <div v-else class="import-result">
              <div v-if="importResult">
                <el-result
                  :icon="importResult.errors.length === 0 ? 'success' : 'warning'"
                  :title="importResult.errors.length === 0 ? '导入成功' : '导入完成（有错误）'"
                >
                  <template #sub-title>
                    <div class="result-summary">
                      <p>创建客户：{{ importResult.createdClients }} 个</p>
                      <p>创建客户经理关联：{{ importResult.createdManagerAssignments }} 个</p>
                      <p>创建服务项目关联：{{ importResult.createdServiceAssignments }} 个</p>
                      <p v-if="importResult.errors.length > 0" class="error-count">
                        错误数量：{{ importResult.errors.length }} 个
                      </p>
                    </div>
                  </template>
                  
                  <template #extra>
                    <el-button type="primary" @click="resetImport">重新导入</el-button>
                    <el-button @click="$router.push('/dashboard')">返回首页</el-button>
                  </template>
                </el-result>
                
                <div v-if="importResult.errors.length > 0" class="error-details">
                  <h4>错误详情：</h4>
                  <el-collapse>
                    <el-collapse-item title="查看错误信息" name="errors">
                      <ul>
                        <li v-for="error in importResult.errors" :key="error" class="error-item">
                          {{ error }}
                        </li>
                      </ul>
                    </el-collapse-item>
                  </el-collapse>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 客户经理选择弹出框 -->
    <el-dialog
      v-model="showManagerDialog"
      title="选择客户经理"
      width="600px"
      :close-on-click-modal="false"
    >
      <div class="manager-selection">
        <el-input
          v-model="managerSearchKeyword"
          placeholder="搜索客户经理姓名或用户名"
          style="margin-bottom: 16px"
          clearable
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>

        <el-table
          :data="filteredManagers"
          style="width: 100%"
          max-height="400px"
          @row-click="selectManager"
          highlight-current-row
        >
          <el-table-column prop="fullName" label="姓名" width="120" />
          <el-table-column prop="username" label="用户名" width="120" />
          <el-table-column label="客户数量" width="100">
            <template #default="scope">
              {{ scope.row._count?.clientAssignments || 0 }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                type="primary"
                size="small"
                @click="selectManager(scope.row)"
              >
                选择
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          v-if="filteredManagers.length > 10"
          v-model:current-page="managerCurrentPage"
          :page-size="10"
          :total="filteredManagers.length"
          layout="prev, pager, next"
          style="margin-top: 16px; text-align: center"
        />
      </div>

      <template #footer>
        <el-button @click="showManagerDialog = false">取消</el-button>
      </template>
    </el-dialog>

    <!-- 服务项目选择弹出框 -->
    <el-dialog
      v-model="showServiceDialog"
      title="选择服务项目"
      width="700px"
      :close-on-click-modal="false"
    >
      <div class="service-selection">
        <el-input
          v-model="serviceSearchKeyword"
          placeholder="搜索服务项目名称"
          style="margin-bottom: 16px"
          clearable
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>

        <el-table
          :data="filteredServices"
          style="width: 100%"
          max-height="400px"
          @selection-change="handleServiceSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="serviceName" label="服务项目名称" width="200" />
          <el-table-column prop="completionCycle" label="完成周期" width="100">
            <template #default="scope">
              {{ getCycleText(scope.row.completionCycle) }}
            </template>
          </el-table-column>
          <el-table-column label="客户数量" width="100">
            <template #default="scope">
              {{ scope.row._count?.clientAssignments || 0 }}
            </template>
          </el-table-column>
          <el-table-column label="周期值" width="80">
            <template #default="scope">
              {{ scope.row.cycleValue }}
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          v-if="filteredServices.length > 10"
          v-model:current-page="serviceCurrentPage"
          :page-size="10"
          :total="filteredServices.length"
          layout="prev, pager, next"
          style="margin-top: 16px; text-align: center"
        />
      </div>

      <template #footer>
        <el-button @click="showServiceDialog = false">取消</el-button>
        <el-button type="primary" @click="confirmServiceSelection">
          确认选择 ({{ selectedServicesList.length }})
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, watch, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
import { UploadFilled, Loading, Search } from '@element-plus/icons-vue';
import { trpc } from '../../utils/trpc';
import { http } from '../../utils/http';

// 步骤控制
const currentStep = ref(0);

// 导入方法
const importMethod = ref('manual');

// 配置表单
const configForm = reactive({
  managerId: null as number | null,
  serviceIds: [] as number[],
});

// 数据
const managers = ref([]);
const services = ref([]);
const manualData = ref('');
const parsedClients = ref([]);
const previewResult = ref(null);
const importResult = ref(null);

// 状态
const previewing = ref(false);
const importing = ref(false);
const importCompleted = ref(false);

// 弹出框状态
const showManagerDialog = ref(false);
const showServiceDialog = ref(false);

// 搜索关键词
const managerSearchKeyword = ref('');
const serviceSearchKeyword = ref('');

// 分页
const managerCurrentPage = ref(1);
const serviceCurrentPage = ref(1);

// 选择的服务项目列表（用于多选）
const selectedServicesList = ref([]);

// 计算属性
const canProceedStep1 = computed(() => {
  return configForm.managerId && configForm.serviceIds.length > 0;
});

const selectedManager = computed(() => {
  return managers.value.find((m: any) => m.id === configForm.managerId);
});

const selectedServices = computed(() => {
  return services.value.filter((s: any) => configForm.serviceIds.includes(s.id));
});

// 显示选中的客户经理
const selectedManagerDisplay = computed(() => {
  const manager = managers.value.find((m: any) => m.id === configForm.managerId);
  return manager ? `${manager.fullName} (${manager.username})` : '';
});

// 显示选中的服务项目
const selectedServicesDisplay = computed(() => {
  const selected = services.value.filter((s: any) => configForm.serviceIds.includes(s.id));
  return selected.length > 0 ? selected.map((s: any) => s.serviceName).join(', ') : '';
});

// 过滤后的客户经理列表
const filteredManagers = computed(() => {
  let filtered = managers.value;
  if (managerSearchKeyword.value) {
    const keyword = managerSearchKeyword.value.toLowerCase();
    filtered = managers.value.filter((m: any) =>
      m.fullName.toLowerCase().includes(keyword) ||
      m.username.toLowerCase().includes(keyword)
    );
  }

  const start = (managerCurrentPage.value - 1) * 10;
  const end = start + 10;
  return filtered.slice(start, end);
});

// 过滤后的服务项目列表
const filteredServices = computed(() => {
  let filtered = services.value;
  if (serviceSearchKeyword.value) {
    const keyword = serviceSearchKeyword.value.toLowerCase();
    filtered = services.value.filter((s: any) =>
      s.serviceName.toLowerCase().includes(keyword)
    );
  }

  const start = (serviceCurrentPage.value - 1) * 10;
  const end = start + 10;
  return filtered.slice(start, end);
});

// 选择客户经理
const selectManager = (manager: any) => {
  configForm.managerId = manager.id;
  showManagerDialog.value = false;
  console.log('选择了客户经理:', manager);
};

// 处理服务项目选择变化
const handleServiceSelectionChange = (selection: any[]) => {
  selectedServicesList.value = selection;
  console.log('当前选择的服务项目:', selection);
};

// 确认服务项目选择
const confirmServiceSelection = () => {
  configForm.serviceIds = selectedServicesList.value.map((s: any) => s.id);
  showServiceDialog.value = false;
  console.log('确认选择的服务项目ID:', configForm.serviceIds);
};

// 获取周期文本
const getCycleText = (cycle: string) => {
  const cycleMap: Record<string, string> = {
    'monthly': '月度',
    'quarterly': '季度',
    'yearly': '年度'
  };
  return cycleMap[cycle] || cycle;
};

// 加载导入选项
const loadImportOptions = async () => {
  try {
    const response = await trpc.import.getOptions.query({});

    if (response.success) {
      managers.value = response.data.managers;
      services.value = response.data.services;
      console.log('加载成功 - 客户经理:', managers.value.length, '个，服务项目:', services.value.length, '个');
    } else {
      ElMessage.error(response.message || '加载选项失败');
    }
  } catch (error) {
    console.error('加载导入选项失败:', error);
    ElMessage.error('加载导入选项失败');
  }
};

// 步骤控制
const nextStep = () => {
  if (currentStep.value === 2) {
    // 从预览步骤到导入步骤，执行导入
    executeImport();
  } else {
    currentStep.value++;
    if (currentStep.value === 2) {
      // 进入预览步骤时自动执行预览
      previewImport();
    }
  }
};

const prevStep = () => {
  if (currentStep.value > 0) {
    currentStep.value--;
  }
};

// 解析手动输入的数据
const parseManualData = () => {
  if (!manualData.value.trim()) {
    ElMessage.warning('请输入客户数据');
    return;
  }

  const allLines = manualData.value.trim().split('\n');
  const lines = allLines.map(line => line.trim()).filter(line => line.length > 0);
  const clients = [];
  const errors = [];

  for (let i = 0; i < lines.length; i++) {
    const line = lines[i];

    const parts = line.split(',').map(p => p.trim());
    if (parts.length !== 4) {
      errors.push(`第 ${i + 1} 行格式错误：应为4个字段`);
      continue;
    }

    const [clientCode, clientName, marketType, terminalType] = parts;

    // 验证市场类型
    if (!['城网', '农网'].includes(marketType)) {
      errors.push(`第 ${i + 1} 行市场类型错误：${marketType}`);
      continue;
    }

    // 验证终端类型
    if (!['普通终端', '一般现代终端', '加盟终端', '直营终端'].includes(terminalType)) {
      errors.push(`第 ${i + 1} 行终端类型错误：${terminalType}`);
      continue;
    }

    clients.push({
      clientCode,
      clientName,
      marketType,
      terminalType,
    });
  }

  if (errors.length > 0) {
    ElMessage.error(`数据解析失败：\n${errors.join('\n')}`);
    return;
  }

  parsedClients.value = clients;
  ElMessage.success(`成功解析 ${clients.length} 条客户数据`);
};

// 清空手动输入的数据
const clearManualData = () => {
  manualData.value = '';
  parsedClients.value = [];
};

// 处理文件上传
const handleFileChange = async (file: any) => {
  try {
    ElMessage.info('正在上传并解析文件，请稍候...');

    // 使用 HTTP 工具上传文件
    const result = await http.upload('/api/upload/parse-file', file.raw);

    if (result.success && result.data) {
      // 解析成功，设置数据
      parsedClients.value = result.data.clients;

      // 显示解析结果信息
      const { fileName, encoding, parsedClients: clientCount, errors } = result.data;
      console.log(`📁 文件解析结果:`, result.data);

      if (errors.length > 0) {
        ElMessage.warning(`文件 "${fileName}" 解析完成，使用编码 ${encoding}，成功解析 ${clientCount} 条数据，但有 ${errors.length} 个错误`);
        console.warn('解析错误:', errors);
      } else {
        ElMessage.success(`文件 "${fileName}" 解析成功，使用编码 ${encoding}，共解析 ${clientCount} 条客户数据`);
      }

      // 设置手动数据区域显示解析后的内容预览
      if (result.data.preview) {
        manualData.value = result.data.preview + (result.data.preview.length >= 500 ? '\n...(内容已截断)' : '');
      }
    } else {
      console.error('文件解析失败:', result);
      ElMessage.error(result.message || '文件解析失败，请检查文件格式');
    }
  } catch (error: any) {
    console.error('文件上传失败:', error);
    ElMessage.error(error.message || '文件上传失败，请检查网络连接');
  }
};

// 预览导入
const previewImport = async () => {
  if (parsedClients.value.length === 0) {
    ElMessage.warning('没有可预览的数据');
    return;
  }

  previewing.value = true;
  try {
    const response = await trpc.import.preview.mutate({
      managerId: configForm.managerId!,
      serviceIds: configForm.serviceIds,
      clients: parsedClients.value,
    });

    if (response.success) {
      previewResult.value = response.data;
    } else {
      ElMessage.error(response.message || '预览失败');
    }
  } catch (error) {
    console.error('预览失败:', error);
    ElMessage.error('预览失败');
  } finally {
    previewing.value = false;
  }
};

// 执行导入
const executeImport = async () => {
  importing.value = true;
  importCompleted.value = false;

  try {
    const response = await trpc.import.import.mutate({
      managerId: configForm.managerId!,
      serviceIds: configForm.serviceIds,
      clients: parsedClients.value,
    });

    if (response.success) {
      importResult.value = response.data;
      ElMessage.success(response.message || '导入完成');
    } else {
      ElMessage.error(response.message || '导入失败');
    }
  } catch (error) {
    console.error('导入失败:', error);
    ElMessage.error('导入失败');
  } finally {
    importing.value = false;
    importCompleted.value = true;
    currentStep.value = 3;
  }
};

// 重置导入
const resetImport = () => {
  currentStep.value = 0;
  configForm.managerId = null;
  configForm.serviceIds = [];
  manualData.value = '';
  parsedClients.value = [];
  previewResult.value = null;
  importResult.value = null;
  importCompleted.value = false;
};

onMounted(() => {
  loadImportOptions();
});
</script>

<style scoped>
.import-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  min-height: 100vh;
  overflow-y: auto;
}

.page-header {
  margin-bottom: 32px;
  text-align: center;
}

.page-header h1 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: #262626;
}

.subtitle {
  margin: 0;
  color: #8c8c8c;
  font-size: 14px;
}

.step-content {
  margin-top: 32px;
  overflow-y: visible;
  max-height: none;
}

.step-panel {
  min-height: auto;
  padding-bottom: 20px;
}

.step-actions {
  margin-top: 32px;
  text-align: center;
}

.step-actions .el-button {
  margin: 0 8px;
}

/* 手动输入样式 */
.manual-input {
  margin-top: 16px;
}

.input-tip {
  margin-bottom: 16px;
  padding: 12px;
  background: #f6f8fa;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.6;
}

.input-tip code {
  background: #e7e7e7;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: monospace;
}

.input-actions {
  margin-top: 16px;
  text-align: right;
}

/* 文件上传样式 */
.file-upload {
  margin-top: 16px;
}

.upload-demo {
  width: 100%;
}

/* 解析结果样式 */
.parsed-result {
  margin-top: 24px;
  padding: 16px;
  background: #f6f8fa;
  border-radius: 6px;
}

.parsed-result h4 {
  margin: 0 0 16px 0;
  color: #262626;
}

.more-tip {
  margin: 12px 0 0 0;
  color: #8c8c8c;
  font-size: 14px;
  text-align: center;
}

/* 预览内容样式 */
.preview-content {
  min-height: auto;
  padding-bottom: 20px;
}

.import-summary {
  margin-bottom: 24px;
}

.import-summary h4 {
  margin: 0 0 16px 0;
  color: #262626;
}

.validation-result {
  margin-top: 24px;
}

.validation-result h4 {
  margin: 0 0 16px 0;
  color: #262626;
}

.error-list, .warning-list {
  margin-top: 16px;
}

.error-list h5, .warning-list h5 {
  margin: 0 0 8px 0;
  font-size: 14px;
}

.error-list ul, .warning-list ul {
  margin: 0;
  padding-left: 20px;
}

.error-item {
  color: #f56565;
  margin-bottom: 4px;
}

.warning-item {
  color: #ed8936;
  margin-bottom: 4px;
}

/* 导入进度样式 */
.import-progress {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.importing {
  text-align: center;
}

.loading-icon {
  font-size: 48px;
  color: #1890ff;
  margin-bottom: 16px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.importing p {
  margin: 0;
  font-size: 16px;
  color: #8c8c8c;
}

.import-result {
  width: 100%;
}

.result-summary p {
  margin: 4px 0;
  font-size: 14px;
}

.error-count {
  color: #f56565;
  font-weight: 600;
}

.error-details {
  margin-top: 24px;
}

.error-details h4 {
  margin: 0 0 16px 0;
  color: #262626;
}

/* 选择显示样式 */
.selection-display {
  display: flex;
  align-items: center;
}

/* 弹出框样式 */
.manager-selection,
.service-selection {
  padding: 0;
}

.manager-selection .el-table,
.service-selection .el-table {
  border: 1px solid #ebeef5;
  border-radius: 6px;
}

.manager-selection .el-table tbody tr:hover,
.service-selection .el-table tbody tr:hover {
  background-color: #f5f7fa;
  cursor: pointer;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .import-page {
    padding: 0 16px;
  }

  .step-content {
    margin-top: 24px;
  }

  .step-actions {
    margin-top: 24px;
  }

  .step-actions .el-button {
    margin: 4px;
  }

  .el-dialog {
    width: 90% !important;
    margin: 0 auto;
  }
}
</style>
